<template>
  <div class="mission-container">
    <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane label="全部"></el-tab-pane>
        <el-tab-pane label="待发送"></el-tab-pane>
        <el-tab-pane label="发送成功"></el-tab-pane>
        <el-tab-pane label="发送中"></el-tab-pane>
    </el-tabs>

    <!--查询条件-->
    <el-form :inline="true" :model="formInline" class="center-form-inline">
        <el-form-item label="消息编号">
            <el-input v-model="formInline.idSearch" placeholder="消息编号"></el-input>
        </el-form-item>
        <el-form-item label="短信内容">
            <el-input v-model="formInline.contentSearch" placeholder="短信内容"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
    </el-form>
    <!--列表-->
    <el-table style="width: 100%;margin: 10px auto"
              :data="tableData"
              v-loading.body="tableLoading"
              element-loading-text="加载中"
              border fit highlight-current-row>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="id" label="消息编号"></el-table-column>
      <el-table-column prop="content" label="短信内容"></el-table-column>
      <el-table-column prop="states" label="状态" :formatter="formatStates"></el-table-column>
      <el-table-column prop="sendUser" label="发送人数"></el-table-column>
      <el-table-column prop="sendMsg" label="发送条数"></el-table-column>
      <el-table-column prop="createDate" label="创建时间">
      </el-table-column>
      <el-table-column width="300" label="操作">
        <template slot-scope="scope">
          <el-tooltip content="预览" placement="top">
            <el-button @click="handleView(scope.$index,scope.row)" size="mini" type="success">预览</el-button>
          </el-tooltip>
          <el-tooltip content="修改" placement="top">
            <el-button @click="handleUpdate(scope.$index,scope.row)" size="mini" type="success">修改</el-button>
          </el-tooltip>
          <el-tooltip content="发送" placement="top">
            <el-button @click="handleSend(scope.$index,scope.row)" size="mini" type="success">发送</el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button @click="handleDelete(scope.$index,scope.row)" size="mini" type="danger">删除</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-bottom: 30px;"></div>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tablePage.current"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="tablePage.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tablePage.total">
    </el-pagination>
  </div>
</template>

<script>
  import msgApi from '@/api/msg'
  export default {
    name: 'MissionCenter',
    data() {
      return {
        tableLoading: false,
        tableData: [{

        }],
        tablePage: {
          current: 1,
          pages: 0,
          size: 10,
          total: 0
        },
        activeName:'',
        formInline: {
            userId:'',
            contentSearch:'',
            userId: 1,
            states:'',
        },
      }
    },
    created: function() {
        this.fetchData()
    },
    methods: {
      handleClick(tab, event) {
        switch(tab.index){
          case '1':{
            this.formInline.states = '0'
            break;
          };
          case '2':{
            this.formInline.states = '1'
            break;
          };
          case '3':{
            this.formInline.states = '100'
            break;
          };
          default:{
            this.formInline.states = ''
            break;
          }
        }
        this.fetchData()
      },
      //分页
      handleSizeChange(val) {
        this.tablePage.size = val;
        this.fetchData();
      },
      handleCurrentChange(val) {
        this.tablePage.current = val;
        this.fetchData();
      },
      //查询
      fetchData() {
        this.tableLoading = true
        msgApi.getUserMsg(this.formInline, this.tablePage).then(res => {
          this.tableData = res.data.page.records
          this.tableLoading = false
          this.tablePage.current = res.data.page.current;
          this.tablePage.size = res.data.page.size;
          this.tablePage.total = res.data.page.total;
        })
      },
      handleDelete(idx, row){
          this.$confirm('您确定要删除该短信？', '提示', confirm).then(() => {
              msgApi.deleteMsg({infoId: row.id}).then(res => {
                  this.tableData.splice(idx, 1)
                  --this.tablePage.total
                  //this.dialogFormVisible = false
                  this.$message.success("删除成功")
              })
          }).catch(res => {
              console.log(res)
              this.$message.info("已取消删除")
          });
      },
      //格式化表格状态列
      formatStates(row, column) {
          switch(row.states) {
              case 0 : {
                  return '待发送'
              };
              case 1 : {
                  return '发送成功'
              };
              case 100 : {
                  return '发送中'
              };
              default: {
                  return '待发送'
              }
          }
      }
    }
  }
</script>

<style scoped>
.mission-container >>> .el-tabs__content{
    display: none;
}
.center-form-inline {
    padding: 20px 10px 0;
    justify-content: center;
}
</style>
